<template>
  <div class="turn-out">
    <van-nav-bar title="充值" right-text left-arrow @click-left="goBack">
      <i style="font-size:10px;color:#666" slot="right" @click="goRecord">充值记录</i>
    </van-nav-bar>

    <div class="cate" @click="show =! show">
      <div>
        <span style="color:#D1A568">*</span>选择币种
      </div>
      <div>{{chooseB}}</div>
      <div>
        <img src="../../../assets/images/icon-arrow-left.png" alt>
      </div>
    </div>
    <div class="cate">
      <div>
        <span style="color:#D1A568">*</span>充币数量
      </div>
      <div><input type="text" v-model="getMoney" placeholder="请输入充币数量"></div>
    </div>
    <button type="submit" class="submit-btn" @click="getRechargeCoin" >确定</button>

    <!-- 币种选择 -->
    <van-actionsheet v-model="show" :actions="actions" @select="onSelect"/>
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import { Toast } from "vant";
import { NavBar } from "vant";
import { coinType, rechargeCoins } from "../../../axios/api.js";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Toast.name]: Toast
  },
  data() {
    return {
      msg: "",
      msgColor: false,
      show: false,
      actions: [],
      chooseB: "请选择币种",
      chooseId: "",
      cardUrl: "",
      cardUrlPic: "",
      getMoney:''
    };
  },
  created() {
    
    console.log(this.$route);
    this.getCoinType();

  },
  watch: {
    $route(to, from) {
      if (this.$route.params.id) {
        console.log(this.$route);
      }
    }
  },
  methods: {
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
    copys() {
      var num = document.getElementById("copyNum").innerHTML;
      var word = document.getElementById("copyWord");
      word.value = num;
      word.select();
      document.execCommand("copy");
      this.$toast("复制成功！");
    },
    //提币记录
    goRecord() {
      this.$router.push({
        name:'money',
        query:{
          id:this.chooseId
        }
      });
    },
    getCoinType() {
      //获取币分类列表
      var that = this;
      coinType()
        .then(res => {
          console.log(res.data,9999);
          that.actions = res.data.data;
          for (var i = 0; i < that.actions.length; i++) {
            that.actions[i].name = that.actions[i].virtual_wallet_name;
          }
          that.chooseB = res.data.data[0].name;
          that.chooseId = res.data.data[0].id;
          console.log(this.chooseId,333)
        })
        .catch(function(err) {});
    },
    //充币地址
    getRechargeCoin() {
        if(this.getMoney <= 0){
            Toast('充值数量不能为0！')
            return false;
        }
      rechargeCoins({
        params: {
          virtualWalletId: this.chooseId,
          amount:this.getMoney,
          token: localStorage.getItem("setToken")
        }
      }).then(res => {
        console.log(res.data, 88888);
        this.cardUrl = res.data.data.virtualWalletAddres;
        this.cardUrlPic = res.data.data.virtualWalletAddresQrCodeUrl;
        if(res.data.code == 200){
            this.$router.push({
                name:"rechargeTo",
                params:{
                    url:this.cardUrl,
                    pic:this.cardUrlPic
                }
            })
        }
      });
    },
    // 币种菜单
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false;
      console.log(item);
      this.chooseB = item.name;
      this.chooseId = item.id;
      console.log(this.chooseId,222)
    }
  }
};
</script>
<style lang="less" scoped>
.ewm {
  border: 1px solid #eee;
  width: 40%;
  margin: 10px auto;
  img {
    width: 100%;
  }
}
#copyWord {
  opacity: 0;
  position: fixed;
  left: -120%;
  height: -120%;
}

.cate {
  height: 40px;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  font-size: 14px;
  div:nth-child(1) {
    width: 30%;
    color: #333;
  }
  div:nth-child(2) {
    width: 60%;
    color: #999;
    input {
      border: none;
      width: 70%;
    }
  }
  div:nth-child(3) {
    width: 10%;
  }
}

.submit-btn {
         width: 85%;
    height: 34px;
    text-align: center;
    line-height: 34px;
    font-size: 14px;
    background-color: #d6ab6f;
    color: white;
    border-radius: 20px;
    margin: 10vh auto 0;
    border: 0;
      }
</style>
